<template>
  <el-dialog v-model="visible" title="课程信息导出(可选填条件)" width="630px" draggable class="dialog" align-center>
    <el-form :inline="true" class="searchBox">
      <el-form-item label="课程代码">
        <el-input v-model="paramsData.courseCode" placeholder="输入课程代码条件" clearable />
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="paramsData.courseName" placeholder="输入课程名称条件" clearable />
      </el-form-item>
      <el-form-item label="学年">
        <el-select v-model="paramsData.schoolYear" placeholder="选择学生学年条件" clearable>
          <el-option v-for="item in schoolYearList" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学期">
        <el-select v-model="paramsData.stage" placeholder="选择学生学期条件" clearable>
          <el-option label="第一学期" value="1" />
          <el-option label="第二学期" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="开课类型">
        <el-input v-model="paramsData.courseType" placeholder="输入开课类型条件" clearable />
      </el-form-item>
      <el-form-item label="开课学院">
        <el-input v-model="paramsData.openCollege" placeholder="输入开课学院条件" clearable />
      </el-form-item>
      <el-form-item label="教师姓名">
        <el-input v-model="paramsData.tchName" placeholder="输入教师姓名条件" clearable />
      </el-form-item>
      <el-form-item label="选课状态">
        <el-select v-model="paramsData.courseIsBegin" placeholder="选择选课状态条件" clearable>
          <el-option label="已开始" value="1" />
          <el-option label="未开始" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="成绩录入状态">
        <el-select v-model="paramsData.scoreIsBegin" placeholder="选择成绩录入状态条件" clearable>
          <el-option label="已开始" value="1" />
          <el-option label="未开始" value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认导出</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUtils } from '../../../../utils';
import { IFileCourseParams } from '../../../../type';
import { useAPI } from '../../../../request/api';
import { onMounted } from 'vue';

const api = useAPI();
const utils = useUtils();
const visible = ref(false);
const schoolYearList = ref([] as { label:string; value:string }[]) ;
const paramsData = ref<IFileCourseParams>({
  courseCode: '',
  courseName: '',
  schoolYear: '',
  stage: '',
  courseType: '',
  openCollege: '',
  tchName: '',
  courseIsBegin: '',
  scoreIsBegin: ''
})

onMounted(() => {
  schoolYearList.value = utils.getSchoolYearList();
})

const open = () => {
  paramsData.value = {
    courseCode: '',
    courseName: '',
    schoolYear: '',
    stage: '',
    courseType: '',
    openCollege: '',
    tchName: '',
    courseIsBegin: '',
    scoreIsBegin: ''
  }
  visible.value = true;
}

const onCancel = () => {
  visible.value = false;
}
const onConfirm = () => {
  const exportUrl = utils.buildUrlParams(paramsData.value, api.course.fileExportUrl);
  visible.value = false;
  window.open(exportUrl, '_self');
}

defineExpose({ open })
</script>

<style lang="scss"  scoped>
.searchBox {

    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }
</style>